<template>
    <div class="equipmentDialog">
        <el-dialog :title="dialogName" :model-value="dialogVisible" :close-on-click-modal="false" :show-close="false"
            :modal="false" top="30vh" width="35%" class="left-dialog">
            <el-form ref="ruleForm" :model="formData" :rules="formRules" label-position="top">
                <el-row class="form" :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="设备名" prop="title">
                            <el-input v-model="formData.title" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="品牌" prop="brand">
                            <el-input v-model="formData.brand" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="设备类型" prop="deviceType">
                            <el-select v-model="formData.deviceType" placeholder="请选择"
                                @change="changDevice(formData.deviceType)">
                                <!-- <el-option label="选择" :value="Number(0)"></el-option> -->
                                <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.label"
                                    :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="模块">
                            <el-input v-model="formData.module" autocomplete="off" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleReset('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="handleSubmit('ruleForm')">
                    确 定
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'EquipmentDialog',
    props: {
        deviceTypeList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            dialogVisible: false, // 设备对话框
            dialogName: '新增设备',
            formData: {},
            formRules: {
                title: [
                    { required: true, message: '请输入设备名称', trigger: 'blur' },
                ],
                brand: [
                    { required: true, message: '请输入设备品牌', trigger: 'blur' },
                ],
                deviceType: [
                    { required: true, message: '请选择设备类型', trigger: 'change' },
                ],
            },
            controlTypeList: [],
        }
    },
    created() {
        this.controlTypeList = [
            { id: '1', value: 'rs232', label: 'RS-232' },
            { id: '2', value: 'rs485', label: 'RS-485' },
            { id: '3', value: 'tcp', label: 'TCP' },
            { id: '4', value: 'crestronnet', label: 'Crestronnet' },
            { id: '5', value: 'bgserver', label: 'BGServer' },
            { id: '6', value: 'relay', label: 'Relay' },
        ]
        console.log(this.deviceTypeList, '666');
    },
    mounted() { },
    methods: {
        // 显示弹框
        show(title, data) {
            this.dialogVisible = true
            this.dialogName = title
            this.formData = JSON.parse(JSON.stringify(data))
            // console.log(Math.random().toString(36).slice(2))
        },
        //
        changDevice(type) {
            this.deviceTypeList.forEach((item) => {
                console.log(item, 'fkl');
                if (item.value === type) {
                    this.formData.module = item.module
                }
            })
        },
        // 取消操作
        handleReset(formName) {
            this.formData = {}
            this.$refs[formName].resetFields()
            this.dialogVisible = false
        },
        // 确认提交
        handleSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('change-equipment', this.formData)
                    this.dialogVisible = false
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .left-dialog {
    margin-left: calc(15%);
    padding: 0 30px;

    .el-dialog__title {
        font-weight: 700;
    }

    .el-dialog__body {
        border-color: transparent;
    }
}
</style>
